<template>
    <div class="content-wrapper permission">
        <div class="filter-wrapper">
            <el-form ref="filterForm" :model="listQuery" :inline="true">
                <el-form-item prop="real_name" size="medium">
                    <el-input v-model="listQuery.real_name" placeholder="关键字"></el-input>
                </el-form-item>

                <el-form-item prop="status" size="medium">
                    <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 100px">
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.key"
                                :label="item.label"
                                :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-button type="primary" size="medium" icon="el-icon-search" @click="handleFilter">搜索</el-button>
                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">重置</el-button>
                <el-button type="primary" size="medium" icon="el-icon-plus" @click="handleCreate">添加</el-button>
                <el-button type="danger" size="medium" icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
            </el-form>
        </div>

        <el-table
                :data="list"
                border fit
                highlight-current-row
                v-loading="listLoading"
                element-loading-text="给我一点时间"
                empty-text="-"
                @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column type="index" width="55" align="center"></el-table-column>

            <el-table-column label="ID" align="center">
                <template slot-scope="scope"> {{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="所属菜单ID" align="center">
                <template slot-scope="scope"> {{ scope.row.menuId }}</template>
            </el-table-column>
            <el-table-column label="权限名称" align="center">
                <template slot-scope="scope"> {{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="权限标识" align="center">
                <template slot-scope="scope"> {{ scope.row.permission }}</template>
            </el-table-column>
            <el-table-column label="权限类型 （1:按钮,2:页面）" align="center">
                <template slot-scope="scope"> {{ scope.row.type }}</template>
            </el-table-column>
            <el-table-column label="排序值" align="center">
                <template slot-scope="scope"> {{ scope.row.sort }}</template>
            </el-table-column>
            <el-table-column label="状态(true:正常,false:禁用)" align="center">
                <template slot-scope="scope"> {{ scope.row.status }}</template>
            </el-table-column>
            <el-table-column label="备注" align="center">
                <template slot-scope="scope"> {{ scope.row.remarks }}</template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope"> {{ scope.row.ctime }}</template>
            </el-table-column>
            <el-table-column label="最后更新时间" align="center">
                <template slot-scope="scope"> {{ scope.row.utime }}</template>
            </el-table-column>
            
            <el-table-column label="操作" width="180px" align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" icon="edit" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div v-if="!listLoading" class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listQuery.page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="listQuery.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="handleDialogClose">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            
				<el-form-item label="ID" prop="id">
                    <el-input v-model="form.id" placeholder="ID" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="所属菜单ID" prop="menuId">
                    <el-input v-model="form.menuId" placeholder="所属菜单ID" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="权限名称" prop="name">
                    <el-input v-model="form.name" placeholder="权限名称" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="权限标识" prop="permission">
                    <el-input v-model="form.permission" placeholder="权限标识" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="权限类型 （1:按钮,2:页面）" prop="type">
                    <el-input v-model="form.type" placeholder="权限类型 （1:按钮,2:页面）" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="排序值" prop="sort">
                    <el-input v-model="form.sort" placeholder="排序值" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="状态(true:正常,false:禁用)" prop="status">
                    <el-input v-model="form.status" placeholder="状态(true:正常,false:禁用)" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="备注" prop="remarks">
                    <el-input v-model="form.remarks" placeholder="备注" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="创建时间" prop="ctime">
                    <el-input v-model="form.ctime" placeholder="创建时间" style="width: 80%;"></el-input>
                </el-form-item>
				<el-form-item label="最后更新时间" prop="utime">
                    <el-input v-model="form.utime" placeholder="最后更新时间" style="width: 80%;"></el-input>
                </el-form-item>

			</el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('form')">取 消</el-button>
                <el-button v-if="dialogStatus == 'create'" type="primary" @click="create('form')">确 定</el-button>
                <el-button v-else type="primary" @click="update('form')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {created, updated, deleted, selectOne, selectList} from '@/api/system/permission'
    import valid from '@/rules'

    const statusOptions = [{label: '正常', key: true}, {label: '锁定', key: false}]
    const sexOptions = [{label: '男', key: 1}, {label: '女', key: 2}, {label: '未知', key: 3}]

    export default {
        name: 'Permission',
        data() {
            let required = valid.required()
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 10
                },
                form: {
                    sex: 1,
                    status: true
                },
                rules: {
                    example: [required]
                },
                multipleSelection: [],
                statusOptions,
                sexOptions,
                dialogFormVisible: false,
                dialogStatus: '',
                textMap: {update: '编辑', create: '创建'}

            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {//查询分页列表
                this.listLoading = true
                selectList(this.listQuery).then(response => {
                    if (response.data.status === 200) {
                        this.list = response.data.data.list
                        this.total = parseInt(response.data.data.total)
                        this.listLoading = false
                    } else {
                        this.$notify({
                            title: '发生错误', message: response.data.msg,
                            type: 'error', duration: 2000
                        })
                        this.listLoading = false
                    }
                }).catch(error => {
                    this.listLoading = false
                })
            },
            handleFilter() {//条件过滤
                this.listQuery.page = 1
                this.getList()
            },
            handleResetFilter() {//重置过滤条件
                this.cancel('filterForm')
                this.getList()
            },
            handleDialogClose() {//关闭窗口回调函数
                this.cancel('form')
            },
            handleSelectionChange(val) {//多选
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.listQuery.page = 1
                this.listQuery.limit = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            handleCreate() {//添加数据窗口
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
            },
            handleUpdate(row) {//修改数据窗口
                selectOne(row.id).then(response => {
                    this.dialogStatus = 'update'
                    this.dialogFormVisible = true
                    this.form = Object.assign({}, response.data.data)
                })
            },
            handleDelete(row) {//批量删除数据
                let ids = []
                if (row.id != undefined) {
                    ids.push(row.id)
                } else {
                    if (this.multipleSelection.length > 0) {
                        for (let item of this.multipleSelection) {
                            ids.push(item.id)
                        }
                    }
                }
                if (ids.length <= 0) {
                    this.$notify({
                        title: '提示', message: '请选择需要删除的记录',
                        type: 'warning', duration: 2000
                    })
                } else {
                    this.$confirm('确定要删除？', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                        deleted({idList: ids}).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '删除成功',
                                    type: 'success', duration: 2000
                                })
                                this.getList()
                            } else {
                                this.$notify({
                                    title: '删除失败', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }).catch(() => {
                    })
                }
            },
            create(formName) {//添加数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        created(this.form).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '添加成功',
                                    type: 'success', duration: 2000
                                })
                                this.handleResetFilter()
                            } else {
                                this.$notify({
                                    title: '操作失败', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.dialogFormVisible = false
                        })
                    }
                })
            },
            update(formName) {//修改数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        updated(this.form).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '修改成功',
                                    type: 'success', duration: 2000
                                })
                                this.getList()
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.dialogFormVisible = false
                        })
                    }
                })
            },
            cancel(formName) {
                this.dialogFormVisible = false
                const set = this.$refs
                set[formName].resetFields()
                this.form = {
                    sex: 1,
                    status: true
                }
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>